<script setup>
import { ref } from "vue";
const option = ref({
  title: {
    text: "各朝代科学家贡献占比",
    left: "center",
    top: 8,
    textStyle: {
      color: "#000",
    },
  },
  tooltip: {
    trigger: "item",
    formatter: function (params) {
      return (
        params.seriesName +
        " <br/>" +
        params.name +
        " : " +
        
        "科学家贡献占比 (" +
        params.percent +
        "%)"
      );
    },
  },
  series: [
    {
      color: [
        "#D7AFAD",
        "#8dc6c2",
        "#E5CDDD",
        "#C7BED3",
        "#eed046",
        "#738BAD",
        "#85A397",
        "#E1B882",
        "#D9A89A",
        "#B67271",
        "#B1C6E1",
        "#D2A1BF",
        "#9D8DB2",
      ],
      top: 25,
      selectedMode: "single",
      name: "中国古代自然科学家",
      type: "pie",
      radius: [10, 70],
      center: ["50%", "50%"],
      itemStyle: {
        borderRadius: 10,
      },
      data: [
        // 完全保持原始结构，仅调整颜色方案
        { value: 3, name: "元朝" },
        { value: 7, name: "唐朝" },
        { value: 6, name: "明朝" },
        { value: 6, name: "汉朝" },
        { value: 1, name: "秦朝" },
        { value: 5, name: "宋朝" },
        { value: 2, name: "先秦" },
        { value: 2, name: "三国" },
        { value: 3, name: "两晋" },
        { value: 3, name: "南北朝"},
        { value: 1, name: "五代十国"},
        { value: 2, name: "隋朝"},
        { value: 3, name: "清朝"},
      ],
    },
  ],
});
</script>

<template>
  <!-- 科学家页面的饼图 -->
  <ECharts class="chart" :option="option" autoresize />
</template>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
